<template>
  <a-dropdown>
    <div class="warpper">
      <a-avatar
        :src="
          userInfo.avatar ??
          'http://img.duoziwang.com/2021/06/q101801413228587.jpg'
        "
      ></a-avatar>
      <!-- <div>用户名</div> -->
      <!-- 假数据 -->
      <div>{{ userInfo.nickName }}</div>
    </div>

    <template #overlay>
      <a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
        <a-menu-item key="settings" @click="handleToSettings">
          <SettingOutlined />
          {{ '账号设置' }}
        </a-menu-item>

        <a-menu-item key="logout" @click="handleLogout">
          <LogoutOutlined />
          {{ '退出登录' }}
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script lang="ts">
import { User } from '@/model/login/User';
import { USERSET } from '@/router/route-name';
import { useLoginInforStore } from '@/store/login';
import { LogoutOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { computed, defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
  components: { SettingOutlined, LogoutOutlined },
  setup() {
    const loginInforStore = useLoginInforStore();
    const router = useRouter();
    const userInfo = computed<User>(() => loginInforStore.getUserInfo);
    // 账号设置
    const handleToSettings = () => {
      router.push({ name: USERSET });
    };

    // 点击登出
    const handleLogout = () => {
      loginInforStore.LoginOut();
    };

    return { handleToSettings, handleLogout, userInfo };
  },
});
</script>
<style lang="less" scoped>
.warpper {
  height: 36px;
  display: flex;
  align-items: center;
  width: 150px;
  border-radius: 18px;
  padding: 2px;
  background: rgb(240, 242, 247);
}
</style>
